<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '农商管理',
  },
}
</route>
<template>
  <div
    class="pos-fixed left-0 w-full z-20 bg-white"
    :style="{ height: `${menuButtonInfo.top}px` }"
  ></div>
  <div class="pos-fixed left-0 w-full z-20" :style="{ top: `${menuButtonInfo.top}px` }">
    <wd-navbar title="农商管理" left-text="返回" left-arrow>
      <template #left>
        <image
          @click="handelGoperson"
          src="@/static/images/user.png"
          mode="widthFix"
          class="w-[18px]"
        ></image>
      </template>
    </wd-navbar>
  </div>
  <div style="width: 100%" :style="{ minHeight: `${menuButtonInfo.top + 44}px` }"></div>
  <div
    class="box-border p-4 pos-relative bg-[#f7f7f7]"
    :style="{ minHeight: `calc(100vh - ${menuButtonInfo.top + 44}px)` }"
  >
    <div
      class="pos-absolute top-0 left-0 w-full h-[200px] rounded-b-[20px] z-1"
      style="background: linear-gradient(118deg, #48b760 0%, #6bb748 100%)"
    ></div>
    <div class="pos-relative z-10 h-[150px] text-[#f7f7f7]">
      <div class="text-[20px] my-2" style="font-weight: 500">{{ user.name }}</div>
      <div class="text-[15px] mb-1">{{ user.mobile }}</div>
      <div class="text-[15px] mb-1">{{ user.address }}</div>
      <div
        class="h-[40px] bg-white rounded-[8px] mt-4 justify-between flex items-center box-border px-4"
      >
        <wd-input
          style="width: 80%"
          no-border
          type="text"
          v-model="params.keywords"
          placeholder="请输入搜索内容"
          confirm-type="search"
          @confirm="handleSearch"
        />
        <image
          src="@/static/images/search.png"
          mode="widthFix"
          class="w-[14px]"
          @click="handleSearch"
        ></image>
      </div>
    </div>
    <!-- list -->
    <div class="w-full pos-relative z-10 text-[14px]">
      <div
        class="w-full bg-white rounded-[10px] box-border p-4 mb-4 pos-relative shadow-lg-1"
        v-for="(item, index) in list"
        :key="item.id"
        @click="handleItem(item)"
      >
        <div class="flex flex-col gap-4">
          <div class="tag text-white px-2 py-1 text-[14px] bg-[#56b756] rounded-1 w-fit" v-if="item.pay_type === 1">
            <!-- {{ item.pay_type === 1 ? '免费' : '付费' }} -->
            免费
          </div>
          <div class="text-[14px]">
            <span class="text-[#666666] mr-4">
              {{
                item.state !== 1 ? nameDesensitization(item.ns_member_name) : item.ns_member_name
              }}
            </span>
            <span class="text-[#333333] mr-4" :style="{ color: item.state === 1 ? '' : '#56b756' }">{{ item.state === 1 ? '已联系' : '未联系' }}</span>
          </div>
          <!-- 手机号 -->
          <div class="text-[#666666] text-[14px]">
            {{ phoneDesensitization(item.ns_member_mobile) }}
          </div>
          <!-- 地址 -->
          <div class="text-[#666666] text-[14px]">
            {{ addressDesensitization(item.ns_member_address) }}
          </div>
          <!-- 备注 -->
          <div class="text-[#666666] text-[14px] line-clamp-1" v-if="item.state === 1">
            {{ item.mark }}
          </div>
          <!-- 去联系 -->
          <div
            v-else
            @click.prevent="handleContact(item)"
            class="w-1/2 mx-auto text-center rounded-1 font-bold text-white bg-[#56B756] box-border py-2"
          >
            去联系
          </div>
        </div>
        <div class="pos-absolute right-4 top-4 text-right">
          <div class="text-[#56B756] mb-4 font-600">{{ item.service_title }}</div>
          <div class="text-[#999999]">2024-12-03</div>
        </div>
      </div>
    </div>
    <!-- 支付确认对话框 -->
    <NsOverlay
      v-model:visible="visible"
      height="618rpx"
      footerTop="84rpx"
      okText="立即支付"
      cancelText="立即取消"
      @ok="onPay"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <div class="mt-5 text-[#666]">
          该条需求为付费需求
          <br />
          支付后方可查看
          <div class="mt-4 text-[#56B756] text-[36px]">￥{{ price }}</div>
        </div>
      </div>
    </NsOverlay>
    <!-- 支付成功 -->
    <NsOverlay
      v-model:visible="successVisible"
      height="462rpx"
      footerTop="94rpx"
      okText="确定"
      @ok="onSuccess"
      :showCancel="false"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <image src="@/static/images/check-success.png" mode="widthFix" class="w-[50px]"></image>
        <div class="mt-5 text-[#666]">支付成功可返回查看</div>
      </div>
    </NsOverlay>
    <!-- 知晓确认对话框 -->
    <NsOverlay
      v-model:visible="knowVisible"
      height="462rpx"
      footerTop="40rpx"
      okText="我已知晓"
      cancelText="立即取消"
      @ok="onSheet"
    >
      <div class="text-center tip-text" style="padding-top: 68rpx; line-height: 48rpx">
        <div class="mt-5 w-4/5 mx-auto text-[#666]">{{ contactExplain }}</div>
      </div>
    </NsOverlay>
    <!-- 需求报送表单 -->
    <wd-action-sheet v-model="show">
      <div class="pt-7.5 pb-3 bg-[#fff]">
        <div class="info px-4">
          <div class="flex justify-between items-center text-[16px] text-[#666666] mb-5">
            <div>姓名</div>
            <div class="text-[#333]">{{ currentRow?.ns_member_name }}</div>
          </div>
          <div class="flex justify-between items-center text-[16px] text-[#666666] mb-5">
            <div>电话</div>
            <div class="text-[#333]">{{ currentRow?.ns_member_mobile }}</div>
          </div>
        </div>
        <wd-form ref="form" :model="model">
          <wd-cell-group>
            <div class="form-item pb-8">
              <div
                class="form-label form-label-required text-[#666] text-[16px]"
                style="margin-left: 32rpx"
              >
                备注信息
              </div>
              <div class="form-value">
                <wd-textarea
                  label=""
                  label-width="100px"
                  prop="content"
                  custom-textarea-class="feedback-textarea"
                  :maxlength="200"
                  v-model="model.content"
                  placeholder="请输入您的建议..."
                  :clearable="false"
                  :rules="[{ required: true, message: '请填写备注信息' }]"
                />
              </div>
            </div>
          </wd-cell-group>
        </wd-form>
        <div class="confirm" @click="handleSubmit">确认提交</div>
      </div>
    </wd-action-sheet>
  </div>
</template>

<script lang="ts" setup>
import PLATFORM from '@/utils/platform'
import NsOverlay from '@/components/ns-overlay.vue'
import {getContactExplain, getDemandList, getUserInfo, payOrder, toContact} from '@/service/user'
import { onReachBottom } from '@dcloudio/uni-app'
import { useStorage } from '@/utils/storage'
import { useToast } from 'wot-design-uni'
const toast = useToast()
const { set } = useStorage()
defineOptions({
  name: 'Home',
})
const phoneDesensitization = (phone: string) => {
  return phone.replace(/(\d{3})\d{8}/, '$1********')
}
const nameDesensitization = (name: string) => {
  return name.replace(/(\S{0})\S*/, '$1***')
}
const addressDesensitization = (address: string) => {
  return address.replace(/(\S{3})\S*/, '$1********')
}
const searchValue = ref('')
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
function handelGoperson() {
  uni.navigateTo({
    url: '../user/center/index',
  })
}
// 联系说明
const contactExplain = ref<string>('')
const getExplain = async () => {
  const res: IResData<RContact> = await getContactExplain()
  if (res.code === 1) {
    contactExplain.value = res.data.content
  }
}
const visible = ref(false)
const price = ref<string | number>(0)
const successVisible = ref(false)
const currentRow = ref<Demand>()
const handleItem = (item: Demand) => {
  currentRow.value = item
  if (item.is_pay === 1) {
    return toast.show('该需求已下单')
  }
  if (item.pay_type === 2) {
    price.value = item.price
    visible.value = true
  }
}
function onSuccess() {
  show.value = true
}
const show = ref(false)
const model = reactive<{
  // 内容
  content: string
}>({
  content: '',
})
const knowVisible = ref(false)
const onSheet = () => {
  knowVisible.value = false
  show.value = true
}
const form = ref()
const handleContact = async (item: Demand) => {
  console.log(item, 'iiiiii')
  currentRow.value = item
  if (item.is_pay === 1) {
    // return toast.show('该需求已下单')
  }
  if (item.pay_type === 2) {
    if (item.is_pay === 1) {
      await getExplain()
      knowVisible.value = true
      return
    }
    price.value = item.price
    visible.value = true
  } else if (item.pay_type === 1) {
    await getExplain()
    knowVisible.value = true
  }
  return false
}
const handleSubmit = () => {
  form.value
    .validate()
    .then(async ({ valid, errors }) => {
      if (valid) {
        const submitParams = {
          id: currentRow.value?.id,
          mark: model.content,
        }
        const res: IResData<any> = await toContact(submitParams)
        if (res.code === 1) {
          toast.success('提交成功')
          show.value = false
          visible.value = false
          model.content = ''
          params.page = 1
          await getList()
        } else {
          toast.show(res.msg)
        }
      }
    })
    .catch((error) => {
      console.log(error, 'error')
    })
}
// 支付成功
const payInfo = ref<RPayOrder>()
async function onPay() {
  // 支付接口
  const res: IResData<RPayOrder> = await payOrder(currentRow.value.id)
  if (res.code === 1) {
    payInfo.value = res.data
    console.log(res.data, 'onPay')
    visible.value = false
    uni.requestPayment({
      provider: 'wxpay',
      ...res.data,
      orderInfo: {
        ...res.data,
      },
      success: (res) => {
        console.log(res, '支付成功')
        getList()
        successVisible.value = true
      },
    })
  } else {
    toast.show(res.msg)
  }
}
// 用户信息
const user = ref<RUserInfo>({})
const getInfo = async () => {
  const res: IResData<RUserInfo> = await getUserInfo()
  if (res.code === 1) {
    user.value = res.data
    set('userInfo', res.data)
  }
  console.log(res, '用户信息')
}
// 需求列表
const list = ref<Demand[]>([])
const params = reactive<IDemand>({
  page: 1,
  limit: 10,
  keywords: '',
})
const lastPage = ref<number>(0)
const getList = async () => {
  const res: IResData<RDemand> = await getDemandList(params)
  if (res.code === 1) {
    lastPage.value = res.data.last_page
    list.value = params.page === 1 ? res.data.data : list.value.concat(res.data.data)
    console.log(res, '需求列表')
  }
}
const handleSearch = () => {
  params.page = 1
  getList()
}
onReachBottom(() => {
  if (params.page < lastPage.value) {
    params.page++
    getList()
  }
})
// 测试 uni API 自动引入
onLoad(async () => {
  await getInfo()
  await getList()
  await getExplain()
})
</script>

<style scoped lang="scss">
.main-title-color {
  color: #d14328;
}
:deep(.wd-input) {
  @apply w-[90%];
}

.form-label {
  margin-bottom: 20rpx;
}
.form-label-required {
  position: relative;
  padding-left: 8px;
}

.form-label-required::before {
  content: '*';
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 12px;
  color: #f61515;
}

.form-value {
  position: relative;
  background-color: #f7f7f7;
}

:deep(.wd-textarea__value) {
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
}

:deep(.feedback-textarea) {
  padding: 16rpx 20rpx !important;
  height: 268rpx !important;
  background-color: #f7f7f7 !important;
  border-radius: 8px !important;
}

:deep(.wd-textarea__value) {
  border-radius: 16rpx;
}

:deep(.wd-textarea__suffix) {
  display: none;
}

.confirm {
  border-radius: 4px;
  background: #56b756;
  margin: auto;
  width: 690rpx;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
</style>
